<template>
    <div class="right-chart-1">
        <div class="rc1-header">
            任务热点
        </div>
        <div class="word-cloud-container">
            <EchartWordCloud :data="words" :sharp="triangle"></EchartWordCloud>
        </div>
    </div>
</template>

<script setup name="TaskKeyWord">
import EchartWordCloud from '@/views/dashboard/components/datav/EchartWordCloud.vue';

const words = [
    { name: 'Vue', value: 1000 },
    { name: 'ECharts', value: 618 },
    { name: 'JavaScript', value: 438 },
    { name: 'HTML', value: 405 },
    { name: 'CSS', value: 248 },
    { name: 'TypeScript', value: 147 },
    { name: 'Webpack', value: 102 },
    { name: 'Babel', value: 86 },
    { name: 'Node.js', value: 62 },
    { name: 'NPM', value: 38 },
    { name: 'React', value: 300 },
    { name: 'Angular', value: 250 },
    { name: 'Svelte', value: 180 },
    { name: 'Backbone', value: 120 },
    { name: 'Ember', value: 95 },
    { name: 'jQuery', value: 400 },
    { name: 'Bootstrap', value: 350 },
    { name: 'Tailwind', value: 220 },
    { name: 'LESS', value: 110 },
    { name: 'SASS', value: 130 },
    { name: 'Git', value: 500 },
    { name: 'GitHub', value: 450 },
    { name: 'GitLab', value: 200 },
    { name: 'Bitbucket', value: 150 },
    { name: 'Docker', value: 320 },
    { name: 'Kubernetes', value: 280 },
    { name: 'AWS', value: 360 },
    { name: 'Azure', value: 340 },
    { name: 'GCP', value: 290 },
    { name: 'Firebase', value: 210 },
    { name: 'GraphQL', value: 190 },
    { name: 'REST', value: 410 },
    { name: 'API', value: 430 },
    { name: 'SQL', value: 370 },
    { name: 'NoSQL', value: 230 },
    { name: 'MongoDB', value: 260 },
    { name: 'PostgreSQL', value: 240 },
    { name: 'MySQL', value: 310 },
    { name: 'SQLite', value: 170 },
    { name: 'Redis', value: 160 },
    { name: 'Memcached', value: 140 },
    { name: 'Python', value: 520 },
    { name: 'Django', value: 340 },
    { name: 'Flask', value: 280 },
    { name: 'Ruby', value: 200 },
    { name: 'Rails', value: 220 },
    { name: 'Laravel', value: 180 },
    { name: 'PHP', value: 300 },
    { name: 'C#', value: 260 },
    { name: '.NET', value: 250 },
    { name: 'Java', value: 480 },
    { name: 'Spring', value: 220 },
    { name: 'Kotlin', value: 190 },
    { name: 'Swift', value: 210 },
    { name: 'Objective-C', value: 150 },
    { name: 'Go', value: 330 },
    { name: 'Rust', value: 170 },
    { name: 'C++', value: 360 },
    { name: 'C', value: 400 },
    { name: 'Perl', value: 90 },
    { name: 'Scala', value: 130 },
    { name: 'Haskell', value: 80 },
    { name: 'Elixir', value: 70 },
    { name: 'Erlang', value: 60 },
    { name: 'Lua', value: 100 },
    { name: 'Shell', value: 140 },
    { name: 'PowerShell', value: 120 },
    { name: 'Vim', value: 200 },
    { name: 'Emacs', value: 180 },
    { name: 'IntelliJ', value: 250 },
    { name: 'VSCode', value: 500 },
    { name: 'Sublime', value: 160 },
    { name: 'Atom', value: 130 },
    { name: 'WebStorm', value: 140 },
    { name: 'PyCharm', value: 210 },
    { name: 'NetBeans', value: 90 },
    { name: 'Eclipse', value: 100 },
    { name: 'Visual Studio', value: 300 },
    { name: 'Xcode', value: 220 },
    { name: 'Android Studio', value: 180 },
    { name: 'Bootstrap', value: 350 },
    { name: 'Tailwind CSS', value: 200 },
    { name: 'Material UI', value: 190 },
    { name: 'Ant Design', value: 170 },
    { name: 'Bulma', value: 150 },
    { name: 'Foundation', value: 140 },
    { name: 'Semantic UI', value: 130 },
    { name: 'Chakra UI', value: 120 },
    { name: 'Styled Components', value: 110 },
    { name: 'Emotion', value: 100 },
    { name: 'Redux', value: 280 },
    { name: 'MobX', value: 160 },
    { name: 'Vuex', value: 180 },
    { name: 'Pinia', value: 140 },
    { name: 'Nuxt.js', value: 200 },
    { name: 'Next.js', value: 220 },
    { name: 'Gatsby', value: 190 },
    { name: 'Gridsome', value: 80 },
    { name: 'Sapper', value: 60 },
    { name: 'Quasar', value: 50 },
    { name: 'TailwindUI', value: 40 },
    { name: 'Storybook', value: 170 },
    { name: 'Jest', value: 250 },
    { name: 'Mocha', value: 200 },
    { name: 'Chai', value: 150 },
    { name: 'Jasmine', value: 120 },
    { name: 'Cypress', value: 180 },
    { name: 'Puppeteer', value: 160 },
    { name: 'Playwright', value: 140 },
];


</script>

<style lang="scss" scoped>
.word-cloud-container {
    width: 100%;
    height: 235px;
    padding: 20px;
    // height: 60vh;
    // min-height: 400px;
}

.right-chart-1 {
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;

    .rc1-header {
        font-size: 24px;
        font-weight: bold;
        // height: 30px;
        // line-height: 30px;
        // background-color: red;
        padding: 8px;
    }

    .rc1-chart-container {
        flex: 1;
        display: flex;
    }

    .left {
        width: 30%;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .number {
            font-size: 34px;
            color: #096dd9;
            font-weight: bold;
            margin-bottom: 30px;
        }
    }

    .right {
        flex: 1;
        padding-bottom: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}
</style>
